﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/three.js" type="text/javascript"></script>
    <script src="/Scripts/modeler.js" type="text/javascript"></script>
    <script type="text/javascript">
        var bezierFace = new LoopModeler.BezierFace(
            new THREE.Vector3(-10, -10, 0),

            new THREE.Vector3(-9, -10, -4),
            new THREE.Vector3(9, -10, 4),
            new THREE.Vector3(10, -10, 0),

            new THREE.Vector3(10, -9, -4),
            new THREE.Vector3(10, 9, 4),
            new THREE.Vector3(10, 10, 0),

            new THREE.Vector3(9, 10, -4),
            new THREE.Vector3(-9, 10, 4),
            new THREE.Vector3(-10, 10, 0),

            new THREE.Vector3(-10, 9, -4),
            new THREE.Vector3(-10, -9, 4)
        );
        var bezierSurface = bezierFace.tessellate(32);

        $(function () {
            var camera, scene, renderer;
            var mesh;
            var controls;
            var pointLight;
            var dragStart;
            var height = window.innerHeight / 2.1, width = window.innerWidth / 2.1;

            init();
            animate();

            function init() {
                scene = new THREE.Scene();

                var angle = 70, aspect = width / height, near = 1, far = 100;
                camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
                camera.position.y = -20;
                camera.lookAt({ x: 0, y: 1, z: 0 });
                camera.up.z = 1;

                var pointToProject = new THREE.Vector3(0, 0, 0);
                var cameraPosition = new THREE.Vector3(0, -20, 0);
                var pointOnPlane0 = new THREE.Vector3(0, -19, 0);
                var pointOnPlane1 = new THREE.Vector3(1, -19, 0);
                var pointOnPlane2 = new THREE.Vector3(0, -19, 1);

                var matrix = new LoopModeler.Matrix3();
                matrix.setElement(0, 0, pointToProject.x - cameraPosition.x);
                matrix.setElement(1, 0, pointOnPlane1.x - pointOnPlane0.x);
                matrix.setElement(2, 0, pointOnPlane2.x - pointOnPlane0.x);
                matrix.setElement(0, 1, pointToProject.y - cameraPosition.y);
                matrix.setElement(1, 1, pointOnPlane1.y - pointOnPlane0.y);
                matrix.setElement(2, 1, pointOnPlane2.y - pointOnPlane0.y);
                matrix.setElement(0, 2, pointToProject.z - cameraPosition.z);
                matrix.setElement(1, 2, pointOnPlane1.z - pointOnPlane0.z);
                matrix.setElement(2, 2, pointOnPlane2.z - pointOnPlane0.z);

                console.log(matrix);
                console.log(matrix.inverse());

                scene.add(camera);

                mesh = new THREE.Mesh(bezierSurface, new THREE.MeshLambertMaterial({ color: 0xbdb76b }));
                mesh.doubleSided = true;
                scene.add(mesh);

                pointLight = new THREE.PointLight(0xffffff);
                pointLight.position.set(0, -20, 0);
                scene.add(pointLight);

                renderer = new THREE.WebGLRenderer();
                renderer.setSize(width, height);

                $('#container').append(renderer.domElement);

                controls = new THREE.TrackballControls(camera, renderer.domElement);
            }

            function animate() {
                requestAnimationFrame(animate);
                render();
            }

            function render() {
                controls.update();
                pointLight.position = camera.position;

                renderer.render(scene, camera);
            }
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black; width:48%; float: left;">
        test
    </div>

    <div id="container" style="border: 1px solid black; width:48%; float: left;">
        test2
    </div>
</body>
</html>
